<template>
	<div class="myshopping">
		<header>
			<router-link to="/mobile/myhome"><</router-link>
			<h3>我的收藏 <i class="el-icon-location-outline"></i></h3>
			<button>编辑</button>
		</header>
		<div class="goos" v-for="item in goos">
			<div class="img">
				<img :src="`${$ip}/api/public/showimg/${item.book.pic}`"/>
			</div>
			<div class="div1">
				<p>{{item.book.name}}</p>
				<div class="d2">
					<span>￥：{{item.price}}</span>
					<button @click="add(item.book.id)"><i class="el-icon-shopping-cart-2"></i></button>
				</div>
			</div>
		</div>
		<div class="a1">
			<span>一一 • 一一</span>
			<p>&nbsp;</p>
		</div>
	</div>
</template>

<script>
	
export default {
	name:'MyFavorites',
	data(){
		return{
			goos:[]
		}
	},
	methods:{
		add(id){
			this.$router.push({path:`/mobile/bookdetail/${id}`});
		}
	},
	mounted(){
		//查询我的购物车商品
		this.$get("/api/fore/cart/findMyCarts").then((resp)=>{
			this.goos =resp.data.data;
			console.log(this.goos);
		})
	}
}
</script>

<style scoped>
.myshopping{
	width: 100%;
	background-color: #eeeeee;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.myshopping header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.myshopping header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.myshopping header button{
	border: none;
	background-color: #eeeeee;
	font-size: 16px;
}
.myshopping .goos{
	width: 96%;
	height: 10rem;
	margin: 0 auto;
	background-color: #ffffff;
	margin-top: 0.8rem;
	border-radius: 6px;
	display: flex;
}
.myshopping .goos .img{
	width: 7rem;
	height: 7rem;
}
.myshopping .goos .img img{
	width: 100%;
	height: 100%;
	margin-top: 1rem;
	margin-left: 1rem;
	border-radius: 4px;
}
.myshopping .goos .div1 p{
	margin-top: 2rem;
	margin-left: 2rem;
}
.myshopping .goos .div1 .d2{
	width: 15rem;
	display: flex;
	justify-content: space-between;
	margin-top: 1.8rem;
	margin-left: 1rem;
}
.myshopping .goos .div1 .d2 span{
	font-weight: 500;
	margin-top: 1rem;
	margin-left: 1rem;
	color: red;
}
.myshopping .a1{
	margin-top: 1rem;
	text-align: center;
}
.myshopping .a1 span{
	font-size: 18px;
	color: #828282;
}
.myshopping .goos .div1 .d2 button{
	width: 2rem;
	height: 2rem;
	border: none;
	background-color: white;
	border:  0.8px solid #FF4500;
	border-radius: 6px;
	margin-top: 0.5rem;
}
.myshopping .div1 .d2 button i{
	color: red;
	font-size: 20px;
	font-weight: 600;
}
</style>
